import React, { Component } from "react";
import { NavBar, InputItem, Button, Toast } from "antd-mobile";
import "./Register.less";
import {reqRegister} from "../../http/api"
export default class Register extends Component {
  constructor() {
    super();
    this.state = {
      user: {
        phone: "",
        nickname: "",
        password: "",
      },
    };
  }
  Change(val, key) {
    this.setState({
      user: {
        ...this.state.user,
        [key]: val,
      },
    });
  }
  async register() {
    let res = await reqRegister(this.state.user);
    if (res.data.code === 200) {
      Toast.success(res.data.msg, 1);
      this.props.history.replace("/login");
    }
  }
  render() {
    let { user } = this.state;
    return (
      <div className="register">
        {JSON.stringify(user)}
        <NavBar>注册页</NavBar>
        <InputItem
          placeholder="账号"
          onChange={(val) => this.Change(val, "phone")}
        >
          账号
        </InputItem>
        <InputItem
          placeholder="昵称"
          onChange={(val) => this.Change(val, "nickname")}
        >
          昵称
        </InputItem>
        <InputItem
          placeholder="密码"
          onChange={(val) => this.Change(val, "password")}
        >
          密码
        </InputItem>
        <Button type="primary" className="but" onClick={() => this.register()}>
          注册
        </Button>
      </div>
    );
  }
}
